  <!--精品基本信息 -->


<template>
<div style="padding: 2% 3%;">


  <el-row>
    <el-button-group>
      <el-button type="info" :size='size' @click="addShow" :disabled="toggleShow">新增</el-button>
      <el-button type="info" :size='size' @click="editShow" :disabled="!toggleShow">修改</el-button>


      <!-- 修改下拉框 -->

    </el-button-group>
    <template v-if="!toggleShow" >
      <el-select style="margin-left: 1.25rem;" @change="editChange" @clear="clear" :size="size" v-model="value" placeholder="请选择车型名称" >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </template>
    <el-button :size="size" icon="el-icon-close" @click="qingkong" v-if="!toggleShow" circle></el-button>

  </el-row>


  <!-- 新增 -->
  <el-row v-if="toggleShow" >
     <el-divider></el-divider>
     <!-- 改成行类表单  :inline="true"  -->
    <el-form ref="form1"  :inline="true" :rules="rules" :model="form" label-width="150px" >
        <el-form-item  label="客户姓名" prop="name" >
          <el-input :size="size" clearable v-model="form.username" style="width: 110%;"></el-input>
        </el-form-item>
        <el-form-item  label="身份证号码" prop="idNum" >
          <el-input :size="size" clearable v-model="form.idNum" style="width: 110%;"></el-input>
        </el-form-item>
        <el-form-item  label="性别" prop="sex" >
          <el-input :size="size" clearable v-model="form.sex" style="width: 110%;"></el-input>
        </el-form-item>
        <el-form-item  label="区域" prop="area" >
          <el-input :size="size" clearable v-model="form.area" style="width: 110%;"></el-input>
        </el-form-item>

        <!-- 用br换行 或者div  -->
         <br />

        <el-form-item  label="联系电话" prop="phoneNum" >
          <el-input :size="size" clearable v-model="form.phoneNum" style="width: 110%;"></el-input>
        </el-form-item>
        <el-form-item label="客户职业" prop="keHuZhiYe">
          <el-input :size="size" clearable v-model="form.keHuZhiYe" style="width: 110%;"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="dept">
          <el-input :size="size" clearable v-model="form.dept" style="width: 110%;"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="roles">
          <el-input :size="size" clearable v-model="form.dept" style="width: 110%;"></el-input>
        </el-form-item>
         <br />
         <el-form-item label="订交人员" prop="dingJiaoRenYuan">
           <el-input :size="size" clearable v-model="form.dingJiaoRenYuan" style="width: 110%;"></el-input>
         </el-form-item>
         <el-form-item label="转介绍" prop="zhuanJieShao">
           <el-input :size="size" clearable v-model="form.zhuanJieShao" style="width: 110%;"></el-input>
         </el-form-item>


        <el-form-item label="订车日期" prop="dingCheDate">
         <el-date-picker :size="size" style="width: 102%;"
              v-model="form.dingCheDate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
        </el-form-item>

        <el-form-item label="交车日期" prop="jiaoCheDate" >
         <el-date-picker :size="size" style="width: 102%;"
              v-model="form.jiaoCheDate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
        </el-form-item>


        <br />
       <el-form-item label="车型" prop="cheXing">
         <el-input :size="size" clearable v-model="form.cheXing" style="width: 110%;"></el-input>
       </el-form-item>
       <el-form-item label="合同编号" prop="heTongNum">
         <el-input :size="size" clearable v-model="form.heTongNum" style="width: 110%;"></el-input>
       </el-form-item>
       <el-form-item label="颜色" prop="carColor">
         <el-input :size="size" clearable v-model="form.carColor" style="width: 110%;"></el-input>
       </el-form-item>
       <el-form-item label="合格证号码" prop="heGeNum">
         <el-input :size="size" clearable v-model="form.carColor" style="width: 110%;"></el-input>
       </el-form-item>
       <el-form-item label="发票号码" prop="faPiaoNum">
         <el-input :size="size" clearable v-model="form.faPiaoNum" style="width: 110%;"></el-input>
       </el-form-item>
       <el-form-item label="发动机号" prop="engineNum">
         <el-input :size="size" clearable v-model="form.engineNum" style="width: 110%;"></el-input>
       </el-form-item>
       <el-form-item label="车架号" prop="cheJiaNum">
         <el-input :size="size" clearable v-model="form.cheJiaNum" style="width: 110%;"></el-input>
       </el-form-item>
       <el-form-item label="销售价格" prop="xiaoshouPrice">
         <el-input :size="size" clearable v-model="form.xiaoshouPrice" style="width: 110%;"></el-input>
       </el-form-item>
       

    </el-form>
    <el-divider></el-divider>
    <el-button type="primary" style="float: right;" :size='size' @click="save" >保存</el-button>
  </el-row>


   <!-- 修改 -->
  <el-row v-if="!toggleShow">
     <el-divider></el-divider>
    <span v-if="!value">请选择车型名称</span>
    <!-- 根据下拉框是否有值 显示 -->
    <div v-if="value">
      <el-form ref="form1"  :inline="true" :rules="rules" :model="form" label-width="150px" >
          <el-form-item label="车型名称" prop="name" >
            <el-input clearable v-model="form.name" style="width: 110%;"></el-input>
          </el-form-item>

          <!-- 用br换行 或者div  -->
           <br />
          <div style="margin-top: 1.5rem;" >
          <el-form-item label="指导价格" prop="zhiDaoPrice">
            <el-input-number  :size="size" style="width:100%;" controls-position="right" :min="0" v-model="form.zhiDaoPrice">
            </el-input-number>
          </el-form-item>
          <el-form-item label="提车金额" prop="tiCheMoney">
             <el-input-number :size="size" style="width:100%;" controls-position="right" :min="0" v-model="form.tiCheMoney">
             </el-input-number>
          </el-form-item>
          <el-form-item label="数量" prop="many">
             <el-input-number :size="size" style="width:100%;" controls-position="right" :min="0" v-model="form.many">
             </el-input-number>
          </el-form-item>

          </div>

           <br />
          <div  >
          <el-form-item label="置换补贴" prop="zhiHuanSubsidy">
            <el-input-number  :size="size" style="width:100%;" controls-position="right" :min="0" v-model="form.zhiHuanSubsidy">
            </el-input-number>
          </el-form-item>
          <el-form-item label="预估车型返利金额" prop="fanLiPrice">
           <el-input-number :size="size" style="width:100%;" controls-position="right"  :min="0" v-model="form.fanLiPrice">
           </el-input-number>
          </el-form-item>
          <el-form-item label="能源类型" prop="type">
           <el-select v-model="form.type" placeholder="请选择" style="width: 110%;">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </div>

          <br />
          <el-form-item label="厂家出库日期" prop="date">
           <el-date-picker style="width: 102%;"
                v-model="form.date"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
      </el-form>
      <el-divider></el-divider>
        <el-button type="primary" style="float: right;" :size='size' @click="save" >保存</el-button>
    </div>
  </el-row>


</div>
</template>

<script>
  export default{
    data() {
      return {
       size:'mini',

       //切换新增修改显示
       toggleShow:true,

       form:{
         name:'',
         zhiDaoPrice:'',
         tiCheMoney:'',
         many:'',
         zhiHuanSubsidy:'',
         fanLiPrice:'',
         type:'',
         date:''
       },
       //修改下拉框的值
       options:{
       },

       options2:[
          {
            value: '燃油车',
            label: '燃油车'
          }, {
            value: '新能源车',
            label: '新能源车',
          }
       ],
       //修改下拉框选择之后存的值
       value:'',
       rules:{
         name:[{ required: true, message: '请输入车型名称', trigger: 'blur' }],
         type:[{ required: true, message: '请选择能源类型', trigger: 'blur' }],
         date:[{ required: true, message: '请选择出厂日期', trigger: 'blur' }]
       }
      }
    },
    methods:{

      //切换v-if
      addShow(){
        console.log(this.form);
        this.toggleShow=true
         emptyObj(this.form)
         this.value='';
      },
      editShow(){
        this.value='';
        this.toggleShow=false
         emptyObj(this.form)
         this.editOptions();

      },

       //查找修改下拉框的值赋给options
      editOptions(){
        this.$ajax.post("/list",{}).then(res=>{
          var result = res.data;
          if(result.success){
            this.options=result.data
          }
        })
      },

      //保存
      save(){
        this.$refs.form1.validate(valid=>{
          if(valid){

            this.$ajax.post("/save",this.form).then(res=>{
              var result = res.data;
              if(result.success){
                this.$notify({
                  title: '提示',
                  message: '数据保存成功',
                  type: 'success',
                  position: 'bottom-right'
                });
                emptyObj(this.form)
                this.editOptions();
                this.value='';
              }
            })

          }
        })
      },

    //选择下拉框
    editChange(){
      this.$ajax.post("/findById",{id:this.value}).then(res=>{
          var result = res.data;
          if(result.success){
            this.form=result.data;
            console.log(this.form)
            this.form.date=new Date(this.form.date);
          }
      })
    },

    //点击下拉框×
    qingkong(){
      this.value='';
    }


    }
  }


  function emptyObj(obj){
    if(obj.file){
      obj.file=""
    }
    if(obj.date){
      obj.date=""
    }
    for( var key in obj){
      var o = obj[key];
      if(o instanceof Object){
        emptyObj(o);
      }else{
        obj[key]='';
      }
    }
  }
</script>

<style>
</style>
